<template>
  <div id="nav-bar">
    <div class="nav-img">
      <img src="@/assets/img/navbar/head1.png" alt="" />
    </div>
    <div class="nav-title">
      <div class="nav-title-headpic">
        <img src="@/assets/img/navbar/head2.jpg" alt="" />
      </div>
      <div class="nav-title-content">粒芒🍁Blog</div>
    </div>
    <div class="nav-menu">
      <div
        class="nav-menu-item"
        v-for="(item, index) in navbarList"
        :key="item.name"
        @click="onClick(item.path, index)"
      >
        <div :class="currentIndex === index ? 'active' : ''">
          <span :class="item.icon"></span> {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyNavBar",
  data() {
    return {
      navbarList: [
        {
          name: "home",
          path: "/home",
          icon: "el-icon-s-home",
        },
        {
          name: "Knowledge",
          path: "/Knowledge",
          icon: "el-icon-menu",
        },
        {
          name: "CssLib",
          path: "/CssLib",
          icon: "el-icon-picture",
        },
        {
          name: "VueWheel",
          path: "/VueWheel",
          icon: "el-icon-s-tools",
        },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    onClick(path, index) {
      this.$router.push(path);
      this.currentIndex = index;
    },
  },
};
</script>

<style scoped>
#nav-bar {
  display: flex;
  height: 80px;
  background-color: rgb(244, 126, 96, 0.2);
  color: #fff;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 1;
}
#nav-bar .nav-img {
  width: 50px;
  padding: 10px;
  margin-left: 10px;
}
#nav-bar .nav-img img {
  height: 100%;
}
#nav-bar .nav-title {
  display: flex;
  margin-left: 20px;
  width: 200px;
  align-items: center;
}
#nav-bar .nav-title .nav-title-headpic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
}
#nav-bar .nav-title .nav-title-headpic img {
  height: 100%;
}
#nav-bar .nav-title .nav-title-content {
  padding: 10px;
  font-size: 20px;
  font-weight: 800;
}
#nav-bar .nav-menu {
  flex: 1;
  display: flex;
  padding: 10px;
}
#nav-bar .nav-menu .nav-menu-item {
  padding: 10px;
}
#nav-bar .nav-menu .nav-menu-item:hover {
  color: rgb(225, 91, 100);
}
#nav-bar .nav-menu .nav-menu-item div {
  height: 100%;
  line-height: 40px;
}
.active {
  color: rgb(225, 91, 100) !important;
}
</style>